<template>
  <div id="websocket">
    <div class="back">
      <el-button class="buttons" @click="socket">
        开始任务
      </el-button>
    </div>
    <el-progress class="progress" type="circle" :color="'cyan'" :percentage="num" :status="num >= 100 ? 'success' : undefined"></el-progress>
  </div>
</template>

<script>
export default {
  name: 'websocket',
  data () {
    return {
      ws: null,
      num: 0
    }
  },
  methods: {
    socket () {
      let ws = this.ws = new WebSocket('ws://localhost:9602/article/server/111?page=2')
      let _this = this
      if ('WebSocket' in window) {
        ws.onopen = function () {
          // Web Socket 已连接上，使用 send() 方法发送数据
          ws.send('发送数据')
          console.log('数据发送中...')
        }

        ws.onmessage = function (evt) {
          let receivedMsg = evt.data
          console.log(receivedMsg, 'msg')
          _this.$set(_this, 'num', Number.parseInt(receivedMsg))
        }

        ws.onclose = function () {
          // 关闭 websocket
          console.log('连接已关闭...')
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#websocket {
  .buttons {
    margin-left: 15px;
  }
  .progress {
    margin-top: 20px;
  }
}
</style>

<style lang="scss">
  #websocket {
    .back {
      input,textarea,button {
        background-color: rgba(0, 0, 0, 0);
        color: yellow;
      }
      button {
        color: white;
      }
    }
  }
</style>
